import React, { useState } from "react";
import { Select } from "@ct0/ui";
import PanelTemplate from "./panelTemplate";

export default SelectPanel;

function SelectPanel() {
  const [v, setV] = useState("1");
  const [multiV, setMultiV] = useState(["test2", "test3", "test1", "1"]);
  const OPTS = [
    { value: "1", label: "One" },
    { value: "2", label: "Two" },
    { value: "3", label: "Three" },
    { value: 4, label: "Four" },
    { value: 5, label: "Five" },
    { value: 6, label: "Six", disabled: true },
  ];
  const [options, setOptions] = useState([...OPTS]);
  const onSingleChange = (v) => {
    console.log("single value", v);
  };
  const onMultiChange = (v) => {
    setMultiV(v);
    console.log("multi value", v);
  };

  const val = {
    title: "Select 组件",
    descriptions: ["下拉选择器，提供单选和多选模式，选项搜索和已选清空功能"],
    content: {
      title: "代码演示",
      columns: 2,
      children: [
        {
          title: "单选",
          component: (
            <Select
              options={[
                { label: "1", value: "1" },
                { label: "2", value: "2" },
              ]}
              placeholder="请选择"
              onChange={onSingleChange}
            />
          ),
          codeSnippet: `import { Select } from '@ct0/ui'
          
<Select
  options={[
    { label: "1", value: "1" },
    { label: "2", value: "2" },
  ]}
/>
`,
        },
        {
          title: "单选，可搜索",
          component: (
            <Select
              value={v}
              search
              options={options}
              onChange={(v) => setV(v)}
            />
          ),
          codeSnippet: `import { Select } from '@ct0/ui'
          
<Select
  value={v}
  search
  options={options}
  onChange={(v) => setV(v)}
/>
`,
        },
        {
          title: "单选，禁用",
          component: <Select value={v} options={options} disabled />,
          codeSnippet: `import { Select } from '@ct0/ui'
          
<Select
  value={v}
  options={options}
  disabled
/>`,
        },
        {
          title: "多选",
          component: (
            <Select
              value={multiV}
              multiple
              options={options}
              // onChange={setMultiV}
              placeholder="请选择"
              allowClear
              onChange={onMultiChange}
              disabledValueOptions={[
                { label: "test1", value: "test1" },
                { label: "test2", value: "test2" },
                { label: "test3", value: "test3" },
                { label: "test4", value: "test4" },
                { label: "test5", value: "test5" },
              ]}
              allowSelectAll
            />
          ),
          codeSnippet: `import { Select } from '@ct0/ui'
          
<Select
  value={multiV}
  multiple
  options={options}
  onChange={setMultiV}
  placeholder="请选择"
  allowClear
/>
          `,
        },
        {
          title: "多选，可搜索",
          component: (
            <Select
              search
              value={multiV}
              multiple
              options={options}
              onChange={(v) => setMultiV(v)}
              placeholder="请选择"
              allowClearAll
              allowSelectAll
            />
          ),
          codeSnippet: `import { Select } from '@ct0/ui'

<Select
  search
  value={multiV}
  multiple
  options={options}
  onChange={(v) => setMultiV(v)}
  placeholder="请选择"
  allowClearAll
  allowSelectAll
  onInputChange={(t) => {
    const options = OPTS.filter((i) => i.label.includes(t));
    setOptions(options);
  }}
/>
          `,
        },
        {
          title: "多选，禁用",
          component: (
            <Select value={multiV} multiple options={options} disabled={true} />
          ),
          codeSnippet: `import { Select } from '@ct0/ui'
          
<Select
  value={multiV}
  options={options}
  multiple
  disabled={true}
/>`,
        },
      ],
    },
    componentApi: [
      {
        param: "value",
        required: true,
        description: "已选值",
        type: "string ｜ number | <string | number>[]",
      },
      {
        param: "multiple",
        description: "是否为多选模式",
        type: "boolean",
        default: "false",
      },
      {
        param: "options",
        description: "下拉框选项",
        type: "{label, value, disabled}[]",
      },
      {
        param: "disabled",
        description: "是否禁用",
        type: "boolean",
        default: "false",
      },
      {
        param: "search",
        description: "是否显示搜索框",
        type: "boolean",
        default: "false",
      },
      {
        param: "allowClear",
        description: "支持清除",
        type: "boolean",
        default: "false",
      },
      {
        param: "className",
        description: "额外的class",
        type: "string",
      },
      {
        param: "style",
        description: "额外的样式",
        type: "CSSProperties",
      },
      {
        param: "onChange",
        description: "选中 option后调用函数",
        type: "function(v: Value)",
      },
      {
        param: "onInputChange",
        description: "搜索框内容更新后调用函数",
        type: "function(keyWords: string, selectedKeys: Value)",
      },
      {
        param: "dropdownRender",
        description: "自定义下拉框内容",
        type: "(originNode: ReactNode) => ReactNode",
      },
      {
        param: "disabledValueOptions",
        description: "不可修改的value options且不在下拉框展示",
        type: "{label, value}[]",
      },
    ],
  };

  return <PanelTemplate {...val} />;
}
